export const addScrollableBoxComponent = (editor) => {
    const { Components } = editor;

    // 滚动框组件
    Components.addType('scrollableBox', {
        model: {
            defaults: {
                tagName: 'div',
                attributes: { class: 'scrollable-box','data-gjs-type':"scrollableBox", },
                components: [
                    {
                        type: 'text',
                        content: '这是一个可以滚动的框，添加更多内容以查看滚动效果。',
                        attributes: { class: 'scrollable-content' }
                    },
                ],
                styles: `
                    .scrollable-box {
                        width: 100%;
                        max-width: 400px;
                        height: 200px;
                        overflow-y: auto;
                        border: 2px solid #ddd;
                        padding: 12px;
                        background-color: #f9f9f9;
                        border-radius: 8px;
                        scrollbar-width: thin;
                        scrollbar-color: #888 #f9f9f9;
                    
                    }
                    .scrollable-box::-webkit-scrollbar {
                        width: 12px;
                    }
                    .scrollable-box::-webkit-scrollbar-track {
                        background: #f9f9f9;
                    }
                    .scrollable-box::-webkit-scrollbar-thumb {
                        background-color: #888;
                        border-radius: 6px;
                        border: 3px solid #f9f9f9;
                    }
                    .scrollable-box::-webkit-scrollbar-thumb:hover {
                        background-color: #555;
                    }
                    .scrollable-content {
                        font-size: 14px;
                        line-height: 1.5;
                    }
                `,
            }
        }
    });

    // 注册滚动框组件到组件面板中
    editor.BlockManager.add('scrollable-box-block', {
        label: '滚动框',
        category: 'Basic',
        media:`<svg t="1720775193658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4187" width="30" height="30"><path d="M64 128h768v128H64z" p-id="4188"></path><path d="M896 128h64v704h-64z" p-id="4189"></path><path d="M896 288h64v128h-64z" p-id="4190"></path><path d="M64 512h768v128H64z" p-id="4191"></path><path d="M64 320h768v128H64zM64 704h768v128H64z" p-id="4192"></path></svg>`,
        content: {
            type: 'scrollableBox',
        },
    });
};
